<template>
  <div class="list_box" ref="list_box">
    <lang />

    <div class="main" >
      <div class="header_view">
        <div class="list_main">
          <div class="title_view"><title-com /></div>
          <div class="search_view"><Search /></div>
        </div>
      </div>

      <div class="detail_box">
        <div class="back_btn fs_22" @click="goBack()"> ᠪᠤᠴᠠᠬᠤ </div>

        <div class="title_box">
          <div class="book_title fs_22 ">
            <span class="mainColor fw_600 pr_10">ᠨᠣᠮ᠎ᠤᠨ ᠨᠡᠷ᠎ᠡ : </span>
            《{{ (bookDetailData.monbook.title).replace(/\u202f/g, '\u180e').replace(/\u180B/g, '').replace(/\u200c/g, '').replace(/\u200D/g, ' ') }}》
          </div>
          <div class="item fs_20 ellipsis">
            <span class="mainColor fw_600 pr_10">ᠵᠣᠬᠢᠶᠠᠭᠴᠢ : </span>
            {{ (bookDetailData.monbook.author).replace(/\u202f/g, '\u180e').replace(/\u180B/g, '').replace(/\u200c/g, '').replace(/\u200D/g, ' ') }}
          </div>
          <div class="item fs_20 ellipsis">
            <span class="mainColor fw_600 pr_10">ISBN: </span>
            [{{ bookDetailData.isbn }}]
          </div>
          <div class="item fs_20 ellipsis">
            <span class="mainColor fw_600 pr_10">ᠬᠡᠪᠯᠡᠯ᠎ᠦᠨ ᠬᠣᠷᠢᠶ᠎ᠠ : </span>
            <span v-if="bookDetailData.monbook.publisher == 0">ᠲᠣᠳᠣ ᠦᠭᠡᠢ</span>
            <span v-else>{{ (bookDetailData.monbook.publisher).replace(/\u202f/g, '\u180e').replace(/\u180B/g, '').replace(/\u200c/g, '').replace(/\u200D/g, ' ') }} </span>
          </div>
          <div class="item fs_20 ellipsis">
            <span class="mainColor fw_600 pr_10">ᠬᠡᠪᠯᠡᠭᠰᠡᠨ ᠡᠳᠦᠷ ᠬᠤᠭᠤᠴᠠᠭ᠎ᠠ : </span>{{ bookDetailData.published }}
          </div>
          <div class="item fs_20 ellipsis">
            <span class="mainColor fw_600 pr_10">ᠨᠣᠮ ᠬᠠᠶᠢᠬᠤ ᠳ᠋ᠤᠭᠠᠷ : </span>{{ bookDetailData.shelf_number }}
          </div>
          <div class="item fs_20 ellipsis">
            <span class="mainColor fw_600 pr_10">ᠦᠨ᠎ᠡ ᠬᠠᠩᠱᠢ : </span>{{ bookDetailData.price || 'ᠲᠣᠳᠣ ᠦᠭᠡᠢ' }}
          </div>
          <div class="item fs_20 ellipsis">
            <span class="mainColor fw_600 pr_10">ᠲᠣᠪᠴᠢᠯᠠᠯ : </span>{{ bookDetailData.abstract || 'ᠲᠣᠳᠣ ᠦᠭᠡᠢ' }}
          </div>
        </div> 

        <div class="img_box">
          <Turn v-if="bookImgs && bookImgs.length" :bookImgs="bookImgs" class="turn" />

          <!-- loading 动画 -->
          <div v-show="isShow" class="loading_box">
            <div class="loading">
              <spinner />
            </div>
          </div>
        </div>    

        <div class="img_box_1">
          <div class="img_item" v-for="(item, index) in bookImgs" :key="index">
            <img :src="item.img" alt="">
          </div>

           <!-- loading 动画 -->
           <div v-show="isShow" class="loading_box">
            <div class="loading">
              <spinner />
            </div>
          </div>
        </div>
        
        <div class="recommond_box_1">
          <div class="recommond_box_title_box_1">
            <div class="mainColor fs_22 recommond_box_title_1">ᠨᠣᠮ ᠲᠠᠨᠢᠯᠴᠠᠭᠤᠯᠬᠤ</div>
          </div>
          <div class="recommond_book_list_1">
            <div class="recommond_item_1" v-for="(item, index) in bookDetailData.recommends" :key="index">
              <div class="title_1 fs_20 fw_600 ellipsis" v-if="item.title_m" @click="handlerClickRecommendBook(index)">
                《{{ formatTitle(item.title_m)}}》
              </div>
              <div class="title_1 fs_20 fw_600 ellipsis" v-else @click="handlerClickRecommendBook(index)">
                《{{ item.title }}》
              </div>
              <div class="recommend_img_box_1">
                <img class="img_full" :src="item.img || def_book" alt="" @click="handlerClickRecommendBook(index)">
              </div>
            </div>
          </div>
        </div>  
      </div>
    </div>    

    <!-- 推荐书籍 -->
    <div class="recommond_box">
      <div class="recommond_box_title_box">
        <div class="mainColor fs_22 recommond_box_title">ᠨᠣᠮ ᠲᠠᠨᠢᠯᠴᠠᠭᠤᠯᠬᠤ</div>
      </div>
      <div class="recommond_book_list">
        <div class="recommond_item" v-for="(item, index) in bookDetailData.recommends" :key="index">
          <div class="title fs_20 fw_600 ellipsis" v-if="item.title_m" @click="handlerClickRecommendBook(index)">
            《{{ formatTitle(item.title_m)}}》 
          </div>
          <div class="title fs_20 fw_600 ellipsis" v-else @click="handlerClickRecommendBook(index)">
            《{{ item.title }}》 
          </div>
          <div class="img_box">
            <img class="img_full" :src="item.img || def_book" alt="" @click="handlerClickRecommendBook(index)">
          </div>
        </div>
      </div>
    </div>  <!-- 推荐书籍 -->

    <!-- 返回顶部按钮 -->
  </div>
</template>

<script>
  import lang from './lang.vue';
  import TitleCom from '../components/title.vue';
  import Search from './search.vue';
  import Turn from './turn.vue';
  import Spinner from 'vue-simple-spinner'

  export default {
    name: 'BookDetail',
    components: { lang, TitleCom, Search, Turn, Spinner },
    data() {
      return {
        id: 0,
        bookDetailData: {},
        bookImgs: [],
        def_book: require('../assets/def-book.png'),
        isShow: false,
        show: false,
      }
    },
    created() {
      let id = this.$route.query.id
      if (id) {
        this.getBookDetail(id)
      }
    },
    methods: {
      // 获取 图书 详情信息
      async getBookDetail(id) {
        let that = this
        this.isShow = true

        // 判断 响应数据
        this.timer = setTimeout(() => {
          that.$message('求情失败，服务器发生错误！');
          that.isShow = false
        }, 3000)

        // let res = await this.axios.get(`/bookrec/api/v1/books/${ id }`)
        let res = await this.axios.get(`api/bookrec/api/v1/books/${ id }`)
        if (res.data.code == 200) {
          clearTimeout(that.timer)

          this.$nextTick(() => {
            this.isShow = false
          })
          // this.isShow = false

          that.bookDetailData = res.data.data

          that.bookImgs = res.data.data.images
        } else {
          clearTimeout(that.timer)
          this.isShow = false
          this.$message('图书详情获取失败！');
          return false
        }
      },

      // 格式化 title
      formatTitle(val) {
        let arr = []
        let value = val.replace(/\u202f/g, '\u180e').replace(/\u180B/g, '').replace(/\u200c/g, '').replace(/\u200D/g, ' ')

        // 将 内容中的 标点符号 替换为 " "
        let str = value.replace(/[|\《|\》|\·|\(|\)|\︔|\᠄|\᠂|\<|\᠃|\︖]/g, "");
        // 将 内容 转换为 数组 ， 每一个 蒙文字 是一个 元素

        for (let i of str) {
          if (i === " ") {
            arr = str.split(" ")
          }
        }

        if (arr.length == 0 && str.length !== 0) {
          return str
        }

        if ( arr.length > 0 ) {
          return arr.slice(0, 3).join(' ')
        }
      },

      // 前往中文
      goToZhDetail(id) {
        this.$router.push({
          path: '/book-detail',
          query: { id }
        })
      },

      // 返回上一页
      goBack() {
        this.$router.back()
      },

      // 点击推荐书籍
      handlerClickRecommendBook(index) {
        this.bookImgs = []
        let id = this.bookDetailData.recommends[index].id

        if (this.bookDetailData.recommends[index].title_m) {
          this.getBookDetail(id)
        } else {
          // 前往中文详情页
          this.goToZhDetail(id)
        }

        this.$forceUpdate()
      }
    }
  }
</script>

<style lang="less" scoped>
  .list_box {
    width: 100%;
    margin: 0 auto;
    // border: 1px solid #000;

    .main {
      // overflow: hidden;

      .header_view {
        width: 100%;
        height: 182px;
        padding-bottom: 20px;
        border-bottom: 1px solid #ccc;
        position: sticky;
        top: 0;
        background-color: #fff !important;
        z-index: 99;
        .lang_box {
          width: 100%;
        }

        .list_main {
          width: 100%;
          position: relative;

          .title_view {
            width: 100%;
            position: absolute;
            top: 40px;
            left: 0;
          }

          .search_view {
            position: absolute;
            top: 100px;
            left: 50%;
            transform: translateX(-50%);
          }
        }
      }  

      .detail_box {
        width: 80%;
        margin: 30px auto 0;
        // border: 1px solid #999;
        overflow: hidden;
        position: relative;

        .back_btn { 
          width: 35px; 
          height: 70px !important; 
          text-align: center; 
          border-radius: 5px; 
          margin-right: 5px; 
          background-color: #74a5ff; 
          color: #fff; 
          position: absolute;
          top: 0;
          writing-mode: vertical-lr;
          font-family: "gltTig";
          margin-left: 3px;
          cursor: pointer;
        }

        .title_box {
          height: 800px;
          float: left;
          // border: 1px solid #000;
          padding-left: 10px;
          margin-left: 30px;
          display: flex;
          flex-direction: row;
          justify-content: space-around;

          .book_title {
            height: 100%;
            writing-mode: vertical-lr;
            font-family: "gltTig";
            // display: inline-block;
          }
          .item {
            width: 30px;
            height: 100%;
            writing-mode: vertical-lr;
            font-family: "gltTig";
            // display: inline-block;
          }
        }

        .img_box {
          height: 730px;
          float: left;
          border: 1px solid #74a5ff;
          position: relative;

          .turn {
            // width: 100%;
            // border: 1px solid red;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }
          .loading_box {
            width: 20px;
            height: 20px;
            line-height: 20px;
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 999;
            transform: translate(-50%, -50%);
            text-align: center;
            
            .loading {
              font-size: 100px;
              color: #ccc;
              .loading_icon { color: #74a5ff !important; }
            }
          }
        }

        .img_box_1 {
          width: 60%;
          min-height: 800px;
          border: 1px solid #74a5ff;
          float: right;
          // position: absolute;
          // top: 0;
          // right: 0;
          text-align: center;
          overflow: auto;
          padding-top: 20px;
          position: relative;

          img { margin-bottom: 10px; width: 100%; }

          .loading_box {
            width: 20px;
            height: 20px;
            line-height: 20px;
            position: absolute;
            top: 300px;
            left: 50%;
            z-index: 999;
            transform: translateX(-50%);
            text-align: center;
            
            .loading {
              font-size: 100px;
              color: #ccc;
              .loading_icon { color: #74a5ff !important; }
            }
          }
        }
        .img_box_1::-webkit-scrollbar {
          width: 1px;
          height: 100%;
          background-color: #f5f5f5;
        }
        .img_box_1::-webkit-scrollbar-thumb {       
          border-radius: 10px;
          background: #74a5ff;
        }

        .recommond_box_1 {
          width: 30%;
          // height: 800px;
          float: left;
          // margin-right: 5px;
          // border: 1px solid #999;

          .recommond_box_title_box_1 {  
            width: 30px;
            float: left;  
            .recommond_box_title_1 {
              font-family: "gltTig";
              writing-mode: vertical-lr;
            }
          }

          .recommond_book_list_1 {
            width: 80%;
            // height: 800px;
            padding: 10px 0;
            overflow: auto;
            .recommond_item_1 {
              width: 200px;
              height: 270px;
              // border: 1px solid #74a5ff;

              .title_1 {
                width: 30px;
                height: 250px;
                float: left;
                writing-mode: vertical-lr;
                font-family: "gltTig";
              }
              .title:hover { cursor: pointer; }
              
              .recommend_img_box_1 {
                width: calc(100% - 30px);
                height: 200px;
                float: right;
                border: none;
                // border: 1px solid #000;
              }
              &:hover { cursor: pointer; }
            }
          }
        }
      }
    }
    .recommond_box {
      width: 75%;
      margin-left: 15%;
      // border: 1px solid #999;

      .recommond_box_title_box {  
        width: 30px;
        float: left;  
        .recommond_box_title {
          font-family: "gltTig";
          writing-mode: vertical-lr;
        }
      }

      .recommond_book_list {
        width: 97%;
        height: 265px !important;
        padding: 10px 0;
        overflow-y: scroll;
        // border: 1px solid #f00;
        .recommond_item {
          width: 250px;
          height: 250px;
          display: inline-block;
          // border: 1px solid #f00;

          .title {
            width: 30px;
            height: 240px;
            padding-top: 5px;
            float: left;
            writing-mode: vertical-lr;
            font-family: "gltTig";

          }
          .title:hover { cursor: pointer; }
          
          .img_box {
            width: 200px;
            float: left;
            height: 80%;
            border: none;
          }
          &:hover { cursor: pointer; }
        }
      }
    }
  }  

  @media screen and (min-width: 1800px) {
    .img_box { width: 80%;}
   
  }

  @media screen and (min-width: 1600px) and (max-width: 1799px) {
    .detail_box { width: calc(100% - 230px) !important;}
    .img_box { width: 78%; }
    .recommond_box  { width: 17%; }
    .recommond_item { height: 220px !important; }
    .recommond_item > .title { height: 200px !important; }
    .recommond_item > .img_box  { width: 170px !important; height: 190px !important; }
  }

  @media screen and (max-width: 1500px) {
    .img_box, .recommond_box { display: none; }
    .img_box_1, .recommond_box_1 { display: block; }
  }

  @media screen and (min-width: 1501px) {
    .img_box, .recommond_box { display: block; }
    .img_box_1, .recommond_box_1 { display: none; }
  }

  @media screen and (min-width: 1400px) and (max-width: 1599px) {
    .detail_box { width: calc(100% - 240px) !important; }
    .img_box { width: 75%; }
    .recommond_box  { width: 15%;}
    .recommond_item { height: 220px !important; }
    .recommond_item > .title { height: 200px !important; }
    .recommond_item > .img_box  { width: 160px !important; height: 180px !important; }
  }

  @media screen and (min-width: 1200px) and (max-width: 1399px) {
    .detail_box { width: calc(100% - 200px) !important; }
    .detail_box > .img_box {width: 70%; }
    .recommond_box  { width: 20%;}
    .recommond_item { height: 220px !important; }
    .recommond_item > .title { height: 200px !important; }
    .recommond_item > .img_box  { width: 150px !important; height: 170px !important; }
  }

  @media screen and (min-width: 1000px) and (max-width: 1199px) {
    .detail_box { width: calc(100% - 180px) !important; }
    .detail_box > .img_box {width: 65% !important; }
    .recommond_box  { width: 19%;}
    .recommond_item { height: 220px !important; }
    .recommond_item > .title { height: 200px !important; }
    .recommond_item > .img_box  { width: 140px !important; height: 160px !important; }
  }

  @media screen and (min-width: 992px) and (max-width: 999px) {
    .detail_box { width: calc(100% - 180px) !important; }
    .detail_box > .img_box {width: 60% !important; }
    .recommond_box  { width: 19%;}
    .recommond_item { height: 220px !important; }
    .recommond_item > .title { height: 200px !important; }
    .recommond_item > .img_box  { width: 130px !important; height: 150px !important; }
  }
  @media screen and (min-width: 768px) and (max-width: 991px) {
    .detail_box { width: calc(100% - 160px) !important; }
    .detail_box > .img_box {width: 55% !important; }
    .recommond_box  { width: 18%;}
    .recommond_item { height: 200px !important; }
    .recommond_item > .title { height: 160px !important; }
    .recommond_item > .img_box  { width: 120px !important; height: 130px !important; }
  }
</style>

<style scoped>
  .list_box {
    overflow-y: scroll;
  }

  .list_box::-webkit-scrollbar {
    width: 0px;
    height: 100%;
    background-color: #f5f5f5;
  }
  .list_box::-webkit-scrollbar-thumb {       
    border-radius: 10px;
    background: #74a5ff;
  }
  .recommond_book_list::-webkit-scrollbar {
    width: 100%;
    height: 4px;
    background-color: #f5f5f5;
  }
  .recommond_book_list::-webkit-scrollbar-thumb {       
    border-radius: 10px;
    background: #74a5ff;
  }
  /* .recommond_book_list::-webkit-scrollbar-track {      
    border-radius: 10px;
    background: #fff;
  } */
  .recommond_book_list_1::-webkit-scrollbar {
    width: 0px;
    height: 100%;
    background-color: #f5f5f5;
  }
  .recommond_book_list_1::-webkit-scrollbar-thumb {       
    border-radius: 10px;
    background: #74a5ff;
  }
</style>


